<template lang="pug">
  Modal(v-model="checkShow" title="订单详情")
    .created-info
      Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="86")
        FormItem(label="派单企业：" prop="name")
          Select(v-model="formValidate.name")
            Option(v-for="(item, index) in enterpriseList" :value="item" :key="item") {{ item }}
        FormItem(label="订单名称：" prop="title")
          Input(v-model="formValidate.title" type="text" placeholder="请输入订单名称")
        FormItem(label="结算方式：")
          Select(v-model="formValidate.way" style="width:200px" @on-change="wayChange")
            Option(v-for="(item, index) in wayList" :value="item" :key="item") {{ item }}
        FormItem( label="服务佣金：" prop="salary")
          Input(v-model="formValidate.salary" type="number" style="width:100px")
          span.ml-10 元/{{formValidate.unit}}
        FormItem(label="订单内容：" prop="content")
          Input(v-model="formValidate.content" type="textarea" :rows="4" placeholder="请输入订单内容")
        FormItem(v-if="formValidate.way === '时间'" label="服务时间：" )
          .d-f-c
            DatePicker(v-model="time_1" format="yyyy年MM月dd日" type="date" placeholder="请选择日期" style="width: 150px")
            span.style-1 --
            TimePicker(format="HH:mm" type="timerange" placement="bottom-end" placeholder="请选择时间" style="width: 150px")
        FormItem(label="工作地点：" prop="address")
          Input(v-model="formValidate.address" type="text" placeholder="")
    .text-center(slot="footer")
      Button(@click="checkShow=false") 取消
      Button(type="info" @click="confirmFn('formValidate')") 修改订单
</template>

<script>
export default {
  data () {
    return {
      time_1: '',
      time_2: '',
      checkShow: false,
      wayList: ['时间', '数量'],
      enterpriseList: ['瑞幸咖啡人力资源产业园门店', '平安银行'],
      formValidate: {
        name: '瑞幸咖啡人力资源产业园门店',
        title: '咖啡师',
        way: '时间',
        salary: '12',
        unit: '小时',
        content: '负责咖啡制作、外卖打包、门店清洁等工作',
        time: '',
        address: '天心区人力资源产业园'
      },
      ruleValidate: {
        name: [
          { required: true, message: '企业名称不能为空', trigger: 'change' }
        ],
        title: [
          { required: true, message: '订单名称不能为空', trigger: 'blur' }
        ],
        salary: [
          { required: true, message: '佣金不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '订单内容不能为空', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '服务时间不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '工作地点不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    modalOpen () {
      this.checkShow = true
    },
    wayChange (val) {
      console.log(val)
      if (val === '时间') {
        this.formValidate.unit = '小时'
        this.ruleValidate.time = [
          { required: true, message: '服务时间不能为空', trigger: 'blur' }
        ]
      } else {
        this.formValidate.unit = '单'
        delete this.ruleValidate.time
      }
    },
    confirmFn (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
          this.checkShow = false
        } else {
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  span.style-1{
    vertical-align: middle;
  }
  .d-f-c{
    display: flex;
    align-items: center;
  }
</style>
